import React, { Component } from "react";

/*
  事件传参
  1. 内联地使用bind this.xxx.bind(this, 2)
    改变this指向，不会自动执行，会返回新函数，bind的第二个参数会作为新函数的第一个参数
    不推荐，增加内存的

  2. 内联地使用箭头函数
    () => this.add(2)
    点击的时候，触发外层函数，里层自执行
    并不是特别推荐，也会增加内存
    工作中这是最普遍的用法

  3. 使用柯里化函数
    外层直接自执行，里层在点击的时候触发
    参数写在外层，里面只有事件对象event
    推荐的，不会导致内存增加
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
  }

  add = (n, e) => {
    console.log(n, e);
    this.setState((prevState) => {
      return {
        count: prevState.count + n,
      };
    });
  };

  add2 = (n) => (e) => {
    console.log(n, e);
  };

  render() {
    return (
      <>
        <h2>事件的传参</h2>
        <p>count: {this.state.count}</p>
        {/* <button onClick={this.add.bind(this, 2)}>count+2</button>
        <button onClick={this.add.bind(this, 3)}>count+3</button> */}

        <button onClick={(e) => this.add(2, e)}>count+2</button>
        <button onClick={(e) => this.add(3, e)}>count+3</button>

        <button onClick={this.add2(4)}>count+4</button>
        <button onClick={this.add2(5)}>count+5</button>
      </>
    );
  }
}

export default App;
